<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active {
            background-color: dodgerblue;
        }
    </style>
</head>
<body>
<div id="app">
    <!--<h1 :class=[类名1,类名2]>Vue</h1>-->
    <h1 :class="['active']">Vue</h1>
    <h1>React</h1>
    <h1>Angular</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    /*
    * 数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。
    * 但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。
    * 因此，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。
    * */
</script>
</body>
</html>
